<template>
	<div class="lineDefaultChartered">
		<el-form :inline="true" :model="lineParams" ref="lineParams" :rules="rules2" label-width="130px">
			<el-row>
				<el-form-item label="线路">
					<span>{{$parent.$parent.$parent.line.srcCity}}</span>
					<span>-</span>
					<span>{{$parent.$parent.$parent.line.dstCity}}</span>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="车型" prop="carModelId" :rules="[{required: true,message: '请选择车型'}]">
					<el-select v-model="lineParams.carModelId" placeholder="请选择车型">
						<el-option v-for="item in allModelList" :key="item.carTypeId" :label="item.typeName" :value="item.carTypeId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="包车起步价" prop="price" label-width="157px" :rules="[{required: true,message: '请输入起步价'},{type: 'number',min:0.1, message: '起步价为数字值'}]">
					<el-input v-model.number="lineParams.price" auto-complete="off " style='width: 217px;'></el-input>
					<span class="form-suffix">元</span>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="包车包含公里数" prop="mileage">
					<el-input v-model.number="lineParams.mileage" auto-complete="off " style='width: 217px;'></el-input>
					<span class="form-suffix">公里</span>
				</el-form-item>
				<el-form-item class='btn-con' label="">
					<el-button type="primary" icon="plus" @click="addDefaultClick('lineParams')">添加</el-button>
					<el-button type="danger" icon="setting" @click="resetForm('lineParams')">重置</el-button>
				</el-form-item>
			</el-row>
		</el-form>
		<el-table :data="DCTableData" border fit style="width: 100%">
			<el-table-column align='center' prop="typeName" label="车型"></el-table-column>
			<el-table-column align='center' prop="price" label="包车起步价"></el-table-column>
			<el-table-column align='center' prop="mileage" label="起步公里数"></el-table-column>
			<el-table-column align='center' label="超里程价" width="371">
				<template scope="scope">
					<el-table :data="scope.row.extraPrices">
						<el-table-column align='center' prop="id" label="适用公里数" width="251">
							<template scope="props">
								<span>{{props.row.mileageStart}} —— {{props.row.mileage}} 公里</span>
							</template>
						</el-table-column>
						<el-table-column align='center' prop="price" label="单价" width="120"></el-table-column>
					</el-table>
				</template>
			</el-table-column>
			<el-table-column align='center' label="操作" width="250">
				<template scope="scope">
					<el-button @click="revisePrice(scope.row)" icon='edit' type="primary">修改</el-button>
					<el-button @click="delDefault(scope.$index, scope.row)" icon="delete" type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--<el-pagination class='pagination' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[10, 20, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>-->
		<el-dialog v-model="isReviseDC" title="修改默认包车价" size='small'>
			<el-form :model="reviseDCInfo" label-width="100px" ref="reviseDCInfo" :rules="rules2">
				<el-form-item label="车型" prop="carModelId" :rules="[{ required: true, message: '请选择车型'}]">
					<el-select v-model="reviseDCInfo.carModelId" placeholder="请选择车型" disabled>
						<el-option v-for="item in allModelList" :key="item.carTypeId" :label="item.typeName" :value="item.carTypeId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="起步价" prop="price" :rules="[{ required: true, message: '请输入起步价'},{ type: 'number',min: 0.1, message: '起步价为数字值'}]">
					<el-input v-model.number="reviseDCInfo.price" style='width: 217px;'></el-input>
				</el-form-item>
				<el-form-item label="起步公里数" prop="mileage">
					<el-input v-model.number="reviseDCInfo.mileage" style='width: 217px;'></el-input>
				</el-form-item>
				<el-form-item label="超里程价" prop="extraPrices">
					<el-table :data="reviseDCInfo.extraPrices" border style="width: 100%;">
						<el-table-column align='center' prop="price" label="适用公里数(公里)" min-width="210">
							<template scope="scope">
								<el-input :disabled="true" v-model="scope.row.mileageStart" class="price-input"></el-input>
								<span class="dia-suffix">——</span>
								<el-input :disabled="(scope.$index + 1) < reviseDCInfo.extraPrices.length" v-model="scope.row.mileage" @blur='ruleMileageSize' class="price-input"></el-input>
							</template>
						</el-table-column>
						<el-table-column align='center' label="单价(元)">
							<template scope="scope">
								<el-input v-model="scope.row.price" class="price-input" @blur='rulePrice'></el-input>
							</template>
						</el-table-column>
						<el-table-column align='center' label="操作" min-width="190">
							<template scope="scope">
								<el-button v-if="(scope.$index + 1) == reviseDCInfo.extraPrices.length" @click="addExtraPrice(scope.row)" type="primary" icon="plus" size='small'>添加</el-button>
								<el-button v-if="scope.$index == (reviseDCInfo.extraPrices.length-1) && reviseDCInfo.extraPrices.length > 1" @click="delExtraPrice(scope.$index, scope.row)" icon="delete" type="danger" size='small'>删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="isReviseDC=false">取 消</el-button>
				<el-button type="primary" icon='upload2' @click="updateDefaultPrice('reviseDCInfo')">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		name: 'lineDefaultChartered',
		data() {
			var mileageRule = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('公里数不能为空'));
				}
				setTimeout(() => {
					if(!Number.isInteger(value) || value <= 0) {
						callback(new Error('公里数为正整数'));
					} else {
						callback();
					}
				}, 100);
			};
			return {
				lineId: '',
				allModelList: [],
				isReviseDC: false,
				lineParams: {
					carModelId: '',
					price: '',
					mileage: ''
				},
				DCTableData: [],
				reviseDCInfo: {
					id: '',
					carModelId: '',
					price: '',
					mileage: '',
					extraPrices: [{
						id: '',
						mileageStart: '',
						mileage: '',
						price: ''
					}]
				},
				rules2: {
					mileage: [{
						validator: mileageRule,
						type: 'number',
						min: 1,
						required: true
					}],
				}
			}
		},
		methods: {
			searchList() {
				var that = this;
				this.$http.get('/lineDefaultChartorList.shtml', {
						params: {
							lineId: this.lineId
						}
					})
					.then(function(data) {
						if(data.code == 200) {
							that.DCTableData = data.data;
						}
					});
			},
			addDefaultClick(formName) {
				var that = this;
				this.lineParams.id = this.lineId;
				this.$refs[formName].validate((valid) => {
					if(valid) {
						this.$http.post("/addDefaultChartor.shtml",
							"param=" + JSON.stringify(this.lineParams)
						).then(function(data) {
							if(data.code == 200) {
								that.searchList();
								that.$refs[formName].resetFields();
								that.$notify({
									title: '成功',
									message: '添加成功',
									type: 'success'
								});
							}
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			delDefault(index, row) {
				var that = this;
				this.$confirm('确认删除该车型的价格配置信息?', '删除车型价格配置信息', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var priceId = {
						id: row.id
					};
					this.$http.post("/delDefaultChartor.shtml",
						"param=" + JSON.stringify(priceId)
					).then(function(data) {
						if(data.code == 200) {
							that.searchList();
							that.$message({
								type: 'success',
								message: '删除成功!'
							});
						}
					});

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			revisePrice(row) {
				this.isReviseDC = true;
				this.reviseDCInfo = JSON.parse(JSON.stringify(row));
				var extraPrice = this.reviseDCInfo.extraPrices;
				if(extraPrice[extraPrice.length - 1].mileage == "9999999") {
					extraPrice[extraPrice.length - 1].mileage = "";
				}
				if(extraPrice[extraPrice.length - 1].price == "0") {
					extraPrice[extraPrice.length - 1].price = "";
				}
			},
			delExtraPrice(index, row) {
				var that = this;
				var extraPrice = this.reviseDCInfo.extraPrices;
				this.$confirm('确认删除该超里程价格配置信息?', '删除超里程价信息', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					extraPrice.splice(extraPrice.length - 1, 1);
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			addExtraPrice(row) {
				var arry = this.reviseDCInfo.extraPrices;
				var mileage = arry[arry.length - 1].mileage;
				var mileageStart = arry[arry.length - 1].mileageStart;
				var price = arry[arry.length - 1].price;
				var re = /^[0-9]\d*$/;
				if(!mileage || ~~mileage <= ~~mileageStart || !(re.test(mileage))) {
					this.$notify({
						title: '错误',
						message: '结束公里数必须为正整数并且大于开始公里数！',
						type: 'error',
						duration: 3000
					});
				} else if(price <= 0 || !price) {
					this.$notify({
						title: '错误',
						message: '单价必须大于0！',
						type: 'error',
						duration: 3000
					});
				} else {
					this.reviseDCInfo.extraPrices.push({
						id: '',
						mileage: '',
						price: '',
						mileageStart: row.mileage
					})

				}
			},
			updateDefaultPrice(formName) {
				this.ruleMileageSize();
				this.rulePrice();
				var that = this;
				var params = this.reviseDCInfo;
				params.lineId = this.lineId;
				this.$refs[formName].validate((valid) => {
					if(valid) {
						this.$http.post("/updateDefaultChartor.shtml",
							"param=" + JSON.stringify(params)
						).then(function(data) {
							if(data.code == 200) {
								that.searchList();
								that.isReviseDC = false;
								that.$notify({
									title: '成功',
									message: '添加成功',
									type: 'success'
								});
							}
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			ruleMileageSize() {
				var arry = this.reviseDCInfo.extraPrices;
				var mileage = arry[arry.length - 1].mileage;
				var mileageStart = arry[arry.length - 1].mileageStart;
				var re = /^[0-9]\d*$/;
				if(mileage && ~~mileage <= ~~mileageStart) {
					this.$notify({
						title: '错误',
						message: '结束公里数必须为正整数并且大于开始公里数！',
						type: 'error',
						duration: 3000
					});
				} else if(mileage && !(re.test(mileage))) {
					this.$notify({
						title: '错误',
						message: '结束公里数必须为正整数并且大于开始公里数！',
						type: 'error',
						duration: 3000
					});
				}
			},
			rulePrice() {
				var arry = this.reviseDCInfo.extraPrices;
				var price = arry[arry.length - 1].price;
				if(price <= 0 || price == "") {
					this.$notify({
						title: '错误',
						message: '单价必须大于0！',
						type: 'error',
						duration: 3000
					});
				}
			}
		},
		created() {
			if(this.$parent.$parent.$parent.lineDetail == "defaultChartered") {
				this.lineId = window.location.href.split('=')[1];
				var that = this;
				this.$http.get('/allModelList.shtml')
					.then(function(data) {
						if(data.code == 200) {
							that.allModelList = data.data;
						}
						that.searchList();
					});
			}

		},
		watch: {
			"$parent.$parent.$parent.lineDetail": function(name) {
				if(name == "defaultChartered") {
					this.lineId = window.location.href.split('=')[1];
					var that = this;
					this.$http.get('/allModelList.shtml')
						.then(function(data) {
							if(data.code == 200) {
								that.allModelList = data.data;
							}
							that.searchList();
						});
				}
			}
		},
	}
</script>
<style>
	.lineDefaultChartered .form-suffix {
		vertical-align: top;
		padding-top: ;
		display: inline-block;
	}
	
	.lineDefaultChartered .dia-suffix {
		line-height: 36px;
		vertical-align: top;
	}
	
	.lineDefaultChartered .pagination {
		padding: 30px 0 0 40px !important;
	}
	
	.lineDefaultChartered .el-table .cell {
		padding: 0 !important;
	}
	.lineDefaultChartered .btn-con{
		margin-left: 20px;
	}
</style>